<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
	<script type="text/javascript" src="jquery.unwrap.js"></script>
	<script type="text/javascript">
		$(function () {
			$("#test1").find("p").unwrap();
			$("#test2").unwrap();
			$("#test3").find("p").unwrapInner();
			$("#test4").unwrapInner();
		});
	</script>
	<style>
		div { border: 2px solid blue; }
		p { background:yellow; margin:4px; }
		h1 { font:bold 20px "Segoe UI", Arial, Helvetica, sans-serif; margin:15px 0; }
		h2 { font:16px "Segoe UI", Arial, Helvetica, sans-serif; margin:15px 0 25px 35px; text-indent:-20px; }

		#foot {
			margin: 100px 0 30px;
			border: none;
			border-top: 1px solid #ccc;
			padding-top: 4px;
			font: 11px Verdana, Geneva, sans-serif;
		}
		#foot h1 {
			margin: 20px 0 4px;
			font: bold 13px "Segoe UI", Arial, Helvetica, sans-serif;
		}
		#foot ul,
		#foot li {
			margin: 4px 0;
		}
		#foot a {
			text-decoration: none;
			border-bottom: 1px solid #66c;
			color: #00c;
			outline: none;
		}
	</style>
</head>
<body>
	<h1>Unwrap plugin for jQuery</h1>
	<h2><strong>v 1.2</strong></h2>

	<dl id="test1">
		<h1>.unwrap() test</h1>
		<h2>&rArr; You should see 3 yellow paragraphs without a blue border, then a line of plain text, followed by 3 yellow paragraphs surrounded by a single blue border, and finally one yellow paragraph with no border.</h2>
		<div>
			<p>Hello</p>
			<p>cruel</p>
			<p>world</p>
			Version 1.1 ensured that text nodes (like this) were not discarded.
		</div>
		<div>
			<div>
				<p>Goodbye</p>
			</div>
			<div>
				<p>cruel</p>
			</div>
			<div>
				<p>world</p>
			</div>
		</div>
	</dl>

	<dl id="test3">
		<h1>.unwrapInner() test</h1>
		<h2>&rArr; You should see &quot;Hello cruel world&quot; in a single-width blue border, then &quot;Goodbye&quot;, &quot;cruel&quot;, and &quot;world&quot; each within a double-width border.&nbsp; The absence of yellow background demonstrates that all &lt;p&gt; tags were replaced by their contents.</h2>
		<h2>&rArr; Below that, you should see the word &quot;NoSpace&quot; containing no line break or space between &quot;No&quot; and &quot;Space&quot; (which tests that an empty element is simply removed).</h2>
		<div>
			<p>Hello </p>
			<p>cruel </p>
			<p>world </p>
		</div>
		<div>
			<div>
				<p>Goodbye</p>
			</div>
			<div>
				<p>cruel</p>
			</div>
			<div>
				<p>world</p>
			</div>
		</div>
	</dl>

	No<p id="test4"></p>Space

	<div id="foot">
		Unwrap plugin for jQuery<br />
		Copyright &copy; 2009 Todd Northrop
		Visit Speednet Group at <a href="http://www.speednet.biz/">www.speednet.biz</a>
		<h1>Some of our projects:</h1>
		<ul>
			<li><a href="http://jquery-watermark.googlecode.com/">Watermark plugin for jQuery</a></li>
			<li><a href="http://topzindex.googlecode.com/">TopZIndex plugin for jQuery</a></li>
			<li><a href="http://jquery-unwrap.googlecode.com/">Unwrap plugin for jQuery</a></li>
			<li><a href="http://continueif.googlecode.com/">ContinueIf plugin for jQuery</a></li>
			<li><a href="http://tinyautosave.googlecode.com/">Auto-Save plugin for TinyMCE</a></li>
			<li><a href="http://www.lotterypost.com/gadget">Lottery Results Gagdet for Windows&nbsp;Vista&nbsp;&amp; Windows&nbsp;7</a></li>
		</ul>
	</div>

</body>
</html>
